Fixing navigation with clientFetcher

Update the BreedDetails component to add a clientFetcher:

import React from 'react';
- import { useCurrentRouteData, useParams } from '@tata1mg/router';
+ import { useCurrentRouteData, useParams, Link } from '@tata1mg/router';

const BreedDetails = () => {
  const params = useParams();
  const { data, error, isFetching } = useCurrentRouteData();
  
  if (isFetching) return <div>Loading breed details...</div>;
  if (error) return <div>Error loading breed details: {error.message}</div>;
  if (!data) return <div>No breed found</div>;
  
  const breedImages = data.message || [];
  const breedName = params?.breed

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
+     <Link to="/" style={{ display: 'inline-block', marginBottom: '20px', textDecoration: 'none' }}>
+       &larr; Back to All Breeds
+     </Link>
      <h1 style={{ textTransform: 'capitalize' }}>{breedName} Dogs Available for Adoption</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {breedImages.slice(0, 8).map((imageUrl, index) => (
          <div key={index} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
            <img 
              src={imageUrl} 
              alt={`${breedName} ${index+1}`} 
              style={{ width: '250px', height: '250px', objectFit: 'cover' }} 
            />
            <h2 style={{ textTransform: 'capitalize' }}>{breedName} #{index+1}</h2>
            <p>Age: {Math.floor(Math.random() * 10) + 1} years</p>
          </div>
        ))}
      </div>
    </div>
  );
};

// Server fetcher for SSR
BreedDetails.serverFetcher = async ({ params }) => {
  try {
    const breedName = params.breed;
    const response = await fetch(`https://dog.ceo/api/breed/${breedName}/images`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching breed details:', error);
    throw error;
  }
};

+ // Add client fetcher for client-side navigation
+ BreedDetails.clientFetcher = async ({ params }) => {
+   try {
+     const breedName = params.breed;
+     const response = await fetch(`https://dog.ceo/api/breed/${breedName}/images`);
+     const data = await response.json();
+     return data;
+   } catch (error) {
+     console.error('Error fetching breed details:', error);
+     throw error;
+   }
+ };

export default BreedDetails;

Also, add a clientFetcher to the Home component:

// Add after the serverFetcher
+ Home.clientFetcher = async () => {
+   try {
+     const response = await fetch('https://dog.ceo/api/breeds/list/all');
+     const data = await response.json();
+     return data;
+   } catch (error) {
+     console.error('Error fetching dog breeds:', error);
+     throw error;
+   }
+ };

Now try navigating between pages again. You should get smooth client-side navigation without full page reloads.